<template>
  <div class="module">
    <div class="content">
      <!-- 标题 -->
      <van-nav-bar class="content">
        <template #left>
          <van-icon
            name="arrow-left"
            size="18"
            @click="onClickLeft"
          />
        </template>
        <template #right>
          <van-icon
            name="search"
            size="18"
          />
        </template>
      </van-nav-bar>
      <!-- 头部 -->
      <div>
        <!-- 手机信息 -->
        <van-row class="box">
          <van-col
            span="6"
            class="img_box"
          >
            <van-image :src="'apis/kuan_api/ProductImg/'+product.ProductImg" />
          </van-col>
          <van-col
            span="14"
            :offset="1"
          >
            <p
              style="color:white;font-size:18px"
              class="txt"
            >{{product.ProductName}}</p>
            <p
              class="txt"
              style="color:lightgray"
            >{{product.hot}}热度 1.2万讨论</p>
            <p
              class="txt"
              style="color:white"
            > 9208关注></p>
          </van-col>
          <van-col
            span="3"
            class="attention"
          >
            <van-button
              size="small"
              class="btn"
              v-if="this.isAttention"
              @click="cancelAttention"
            >已关注</van-button>
            <van-button
              type="primary"
              size="small"
              class="btn"
              v-else
              @click="attention"
            >关注</van-button>
          </van-col>
        </van-row>
        <!-- 手机标签 -->
        <div class="box">
          <van-tag class="tag">晓龙8 Gen1</van-tag>
          <van-tag class="tag">120Hz</van-tag>
          <van-tag class="tag">120W有线快充</van-tag>
          <van-tag class="tag">6.73英寸微曲面屏</van-tag>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div>
      <van-tabs
        v-model="active"
        swipeable
        title-active-color="#2E8B57"
        color="#2E8B57"
        line-width="10px"
        swipe-threshold
      >
        <van-tab title="全部">
          全部
        </van-tab>
        <van-tab title="评论">
          <div class="dongtai_box">
            <div class="box">
              <van-row>
                <van-col span="20">排序规则</van-col>
                <van-col span="4">最近回复</van-col>
              </van-row>
              <div
                class="dongtai"
                v-for="item in dongtai"
                :key="item.id"
              >

                <van-skeleton
                  title
                  avatar
                  :row="3"
                  :loading="loading"
                >
                  <van-row>
                    <van-col
                      span="4"
                      v-if="dongtai!=''"
                    >
                      <van-image
                        width="1.0rem"
                        height="1.0rem"
                        :src="'apis/kuan_api/photo/'+item.user_img"
                        round
                      />
                    </van-col>
                    <van-col
                      span="18"
                      @click="lookDetail(item.id)"
                    >
                      <p style="margin:3px">{{item.user_nickname}}</p>
                      <p style="margin:3px">{{item.AddTime}}</p>
                      <p>{{item.message}}</p>
                      <div v-if="item.img!=null">
                        <van-image
                          :src="'apis/kuan_api/img/'+item.img"
                          fit="contain"
                          v-if="item.img.search('.mp4')==-1"
                        />
                        <video
                          width="250"
                          height="150"
                          controls
                          v-if="item.img.search('.mp4')!=-1"
                        >
                          <source
                            :src="'apis/kuan_api/img/'+item.img"
                            type="video/mp4"
                          >
                        </video>
                      </div>
                    </van-col>
                    <van-col span="2">
                      <van-button
                        class="sel"
                        @click="select(item.id,item.user_id,item.img)"
                      >
                        <van-icon name="arrow-down" />
                      </van-button>
                    </van-col>
                  </van-row>
                </van-skeleton>

              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="点评">
          点评
        </van-tab>
        <van-tab title="问答">
          问答
        </van-tab>
        <van-tab title="图文">
          图文
        </van-tab>
        <van-tab title="视频">
          视频
        </van-tab>
        <van-tab
          title="交易"
          class="jiaoyi"
        >
          <div class="trade_box">
            <div
              class="trade"
              v-for="trade in trade"
              :key="trade.id"
            >
              <van-row style="padding:8px">
                <van-col span="3">
                  <van-image
                    width="1rem"
                    height="1rem"
                    :src="'apis/kuan_api/photo/'+trade.user_img"
                    round
                  />
                </van-col>
                <van-col span="18">
                  <p style="margin:5px;font-size:15px">{{trade.user_nickname}}</p>
                  <p style="margin:5px">{{trade.sendtime}}</p>
                </van-col>
                <!-- 下拉菜单 -->
                <van-col span="3">
                  <van-button
                    class="sel"
                    @click="select(trade.id,trade.user_id,trade.img)"
                  >
                    <van-icon name="arrow-down" />
                  </van-button>
                </van-col>
              </van-row>
              <div
                style="padding:10px"
                @click="looktrade(trade.OderID,trade.categoryid)"
              >
                <van-row>
                  <van-col span="12">
                    <p style="margin-top:0;margin-bottom:10px">
                      <van-tag type="danger">{{trade.identity}}</van-tag>
                      {{trade.title}}
                    </p>
                    <p style="color:red;font-size:18px;margin-top:5px;margin-bottom:10px">￥{{trade.price}}</p>
                  </van-col>
                  <van-col span="12"><img
                      src="../img/wancheng.png"
                      alt=""
                      style="width:50px;height:50px"
                      v-if="trade.IsSale==1"
                    ></van-col>
                </van-row>
                <p style="margin-top:5px">{{trade.info}}</p>
                <div>
                  <van-image
                    :src="'apis/kuan_api/trade/'+trade.filelist"
                    fit="contain"
                    style="width:50%"
                  />
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部发送动态按钮 -->
    <div class="bot_btn">
      <van-button
        type="primary"
        round
        @click="sendbtn=true"
      >
        <van-icon name="edit" />
      </van-button>
    </div>

    <!-- 非用户弹出层 -->
    <van-popup
      v-if="this.userid!=$store.state.user.user_id"
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <!-- 头部小按钮 -->
      <p style="text-align:center;margin-top:3px">
        <van-button class="top_btn"></van-button>
      </p>
      <!-- 第一行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="star-o"
                class="first_btn"
              ></van-button>
              <p>收藏</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="eye-o"
                class="first_btn"
              ></van-button>
              <p>屏蔽</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="first_btn"
              ></van-button>
              <p>举报</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 第二行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="records"
                class="sec_btn"
              ></van-button>
              <p>动态</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="envelop-o"
                class="sec_btn"
              ></van-button>
              <p>私信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="wechat"
                class="thi_btn"
              ></van-button>
              <p>微信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>朋友圈</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>QQ</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 取消按钮 -->
      <van-button
        block
        style="background-color:#f5f5f5"
        @click="quxiao"
      >取消</van-button>
    </van-popup>
    <!-- 用户弹出层 -->
    <van-popup
      v-else
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <!-- 头部小按钮 -->
      <p style="text-align:center;margin-top:3px">
        <van-button class="top_btn"></van-button>
      </p>
      <!-- 第一行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="back-top"
                class="first_btn"
              ></van-button>
              <p>置顶</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="star-o"
                class="first_btn"
              ></van-button>
              <p>收藏</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="edit"
                class="first_btn"
              ></van-button>
              <p>编辑</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="delete-o"
                class="first_btn"
                @click="deleteDongtai"
              ></van-button>
              <p>删除</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 第二行按钮 -->
      <div class="icon_box">
        <div>
          <van-row>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="records"
                class="sec_btn"
              ></van-button>
              <p>动态</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="envelop-o"
                class="sec_btn"
              ></van-button>
              <p>私信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="wechat"
                class="thi_btn"
              ></van-button>
              <p>微信</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>朋友圈</p>
            </van-col>
            <van-col
              span="4"
              style="margin-right:10px;text-align:center"
            >
              <van-button
                icon="bulb-o"
                class="thi_btn"
              ></van-button>
              <p>QQ</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 取消按钮 -->
      <van-button
        block
        style="background-color:#f5f5f5"
        @click="quxiao"
      >取消</van-button>
    </van-popup>
    <!-- 发布动态弹出层 -->
    <van-popup
      v-model="sendbtn"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="sel_btn">
        <!-- 讨论 -->
        <van-grid
          :column-num="3"
          :border="false"
        >
          <van-grid-item to="/sendmessage">
            <van-button
              type="primary"
              icon="edit"
              class="btn_class"
            ></van-button>
            <p>讨论</p>
          </van-grid-item>
          <!-- 点评 -->
          <van-grid-item>
            <van-button
              type="info"
              icon="records"
              class="btn_class"
            ></van-button>
            <p>点评</p>
          </van-grid-item>
          <!-- 提问 -->
          <van-grid-item>
            <van-button
              type="primary"
              icon="question-o"
              class="btn_class"
            ></van-button>
            <p>提问</p>
          </van-grid-item>
          <!-- 图文评测 -->
          <van-grid-item>
            <van-button
              type="primary"
              icon="orders-o"
              class="btn_class"
            ></van-button>
            <p>图文评测</p>
          </van-grid-item>
          <!-- 视频 -->
          <van-grid-item>
            <van-button
              type="primary"
              icon="play-circle-o"
              class="btn_class"
            ></van-button>
            <p>视频</p>
          </van-grid-item>
          <!-- 二手 -->
          <van-grid-item :to="{path:'/sellused',query:{id:productid}}">
            <van-button
              type="danger"
              icon="gift-o"
              class="btn_class"
            ></van-button>
            <p>二手</p>
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "module",
  data() {
    return {
      productid: "",
      active: 1,
      product: [],
      dongtai: [],
      show: false,
      userid: "",
      imgname: "",
      brandAttention: [],
      isAttention: false,
      loading: false,
      sendbtn: false,
      trade: [],
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    // 获取模块
    getmodule() {
      this.axios
        .post("apis/kuan_api/getproduct.php", {
          productid: this.productid,
        })
        .then((res) => {
          this.product = res.data.product[0];
        });
    },
    // 下拉菜单
    select(id, userid, img) {
      this.show = true;
      this.userid = userid;
      this.messageid = id;
      this.imgname = img;
    },
    quxiao() {
      this.show = false;
    },
    // 删除动态
    deleteDongtai() {
      this.axios
        .post("apis/kuan_api/DeleteDongTai.php", {
          id: this.messageid,
          img: this.imgname,
        })
        .then((res) => {
          this.show = false;
          this.$toast.success("删除成功");
          this.getmodule();
        });
      console.log(this.messageid);
      console.log(this.imgname);
    },
    // 查看动态
    lookDetail(id) {
      sessionStorage.setItem("message_id", JSON.stringify(id));
      this.$router.push("/detail");
    },
    getdongtai() {
      this.axios
        .post("apis/kuan_api/moduleDetail.php", {
          categoryid: this.productid,
        })
        .then((res) => {
          this.dongtai = res.data.message;
        });
    },
    // 获取品牌关注列表
    getBrandAtt() {
      this.axios
        .post("apis/kuan_api/BrandAttention.php", {
          code: 0,
          userid: this.$store.state.user.user_id,
        })
        .then((res) => {
          res.data.brandattention.forEach((element) => {
            if (this.productid == element.brandID) {
              this.isAttention = true;
              this.brandAttention = element;
            }
          });
        });
    },
    // 关注模块
    attention() {
      this.axios
        .post("apis/kuan_api/BrandAttention.php", {
          code: 1,
          userid: this.$store.state.user.user_id,
          brandid: this.productid,
        })
        .then((res) => {
          this.$toast.success(res.data.message);
          this.getBrandAtt();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 取消关注
    cancelAttention() {
      this.axios
        .post("apis/kuan_api/BrandAttention.php", {
          code: 2,
          attentionID: this.brandAttention.attentionID,
        })
        .then((res) => {
          this.$toast.success(res.data.message);
          this.getBrandAtt();
        });
    },
    // 获取交易列表
    gettrade() {
      this.axios
        .post("apis/kuan_api/searchtrade.php", {
          code: 1,
          categoryid: this.productid,
        })
        .then((res) => {
          console.log(res.data.trade);
          this.trade = res.data.trade;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    looktrade(id, categoryid) {
      this.$router.push({
        path: "/tradedetail",
        query: { orderid: id, cid: categoryid },
      });
    },
  },
  created() {
    setTimeout(() => {
      this.loading = false;
    }, 500);
    this.productid = this.$route.query.productid;
    this.getmodule();
    this.getdongtai();
    this.gettrade();
    if (this.$store.state.user != null) {
      this.getBrandAtt();
    }
  },
};
</script>

<style scoped>
.content {
  background-color: #415867 !important;
  border: 0;
}
.van-nav-bar .van-icon {
  color: white;
}
.box {
  width: 95%;
  margin: 0 auto;
  padding: 10px 0px 10px 0px;
}
.img_box {
  height: 2rem;
  width: 2rem;
  background-color: white;
  border-radius: 5px;
}
.txt {
  margin: 7px;
}
.attention {
  line-height: 75px;
}
.btn {
  width: 55px;
  border-radius: 5px;
}
.bot_btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
.tag {
  height: 25px;
  border-radius: 5px;
  margin-right: 10px;
  background-color: #364653;
}
.dongtai_box {
  background-color: #f2f1f6;
}
.box {
  width: 95%;
  margin: 0 auto;
}
.dongtai {
  margin-top: 15px;
  background-color: white;
  border-radius: 7px;
  padding: 10px;
}

.sel {
  border: 0;
  height: 22px;
}

.top_btn {
  width: 30px;
  height: 5px;
  background-color: #e6e6e6;
}
.icon_box {
  width: 85%;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
.first_btn {
  font-size: 0.5rem;
  background-color: #f0f0f0;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.sec_btn {
  background-color: #00af5726;
  color: #00af57ff;
  font-size: 0.6rem;
  font-weight: bold;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.thi_btn {
  background-color: #00af5719;
  color: #00af57ff;
  font-size: 0.7rem;
  border: 0;
  height: 45px;
  width: 45px;
  border-radius: 50px;
}
.btn_class {
  width: 45px;
  height: 45px;
  border-radius: 45px;
}
.sel_btn {
  width: 85%;
  margin: 0 auto;
  padding-top: 25px;
}
.jiaoyi {
  height: 100vh;
  height: auto;
  background-color: #f2f1f6;
}
.trade_box {
  width: 95%;
  margin: 0 auto;
  padding: 10px 0px 10px 0px;
}
.trade {
  background-color: white;
  border-radius: 8px;
  margin-top: 10px;
}
</style>